<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码API调试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        pre {
            background-color: #eee;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
            max-height: 300px;
        }
        .error {
            color: red;
        }
        .success {
            color: green;
        }
        .info {
            color: blue;
        }
        .status-box {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>验证码API调试页面</h1>
        
        <div class="status-box info">
            <h3>基本信息</h3>
            <p>后端服务端口: <span id="serverPort">8000</span></p>
            <p>当前页面URL: <span id="currentUrl"></span></p>
            <p>浏览器: <span id="browserInfo"></span></p>
        </div>
        
        <div>
            <h3>测试选项:</h3>
            <button id="testFullUrlBtn">使用完整URL测试 (http://localhost:8000/api/auth/captcha)</button>
            <button id="testRelativeBtn">使用相对路径测试 (/api/auth/captcha)</button>
        </div>
        
        <div style="margin-top: 20px;">
            <h3>验证码显示:</h3>
            <img id="captchaImage" style="max-width: 100%; display: none; border: 1px solid #ddd; padding: 5px;" />
            <div id="captchaToken" style="margin-top: 10px;"></div>
        </div>
        
        <div style="margin-top: 20px;">
            <h3>详细日志:</h3>
            <pre id="debugLog"></pre>
        </div>
    </div>
    
    <script>
        const testFullUrlBtn = document.getElementById('testFullUrlBtn');
        const testRelativeBtn = document.getElementById('testRelativeBtn');
        const captchaImage = document.getElementById('captchaImage');
        const captchaToken = document.getElementById('captchaToken');
        const debugLog = document.getElementById('debugLog');
        const currentUrl = document.getElementById('currentUrl');
        const browserInfo = document.getElementById('browserInfo');
        
        // 初始化页面信息
        window.addEventListener('load', function() {
            currentUrl.textContent = window.location.href;
            browserInfo.textContent = navigator.userAgent;
            logInfo('页面加载完成，点击按钮开始测试验证码API');
        });
        
        // 日志记录函数
        function logInfo(message) {
            addLog('INFO', message, false);
        }
        
        function logError(message) {
            addLog('ERROR', message, true);
        }
        
        function logSuccess(message) {
            addLog('SUCCESS', message, false);
        }
        
        function addLog(type, message, isError) {
            const timestamp = new Date().toLocaleTimeString();
            let color = '';
            
            switch(type) {
                case 'ERROR':
                    color = '#ff4444';
                    break;
                case 'SUCCESS':
                    color = '#22aa22';
                    break;
                case 'INFO':
                default:
                    color = '#2266cc';
            }
            
            const logEntry = `[${timestamp}] [${type}] ${message}\n`;
            debugLog.textContent += logEntry;
            debugLog.scrollTop = debugLog.scrollHeight;
            
            if (isError) {
                console.error(logEntry);
            } else {
                console.log(logEntry);
            }
        }
        
        // 清空调试信息
        function clearDebugInfo() {
            debugLog.textContent = '';
            captchaImage.style.display = 'none';
            captchaToken.textContent = '';
        }
        
        // 使用完整URL获取验证码
        function fetchCaptchaWithFullUrl() {
            clearDebugInfo();
            const timestamp = new Date().getTime();
            const url = `http://localhost:8000/api/auth/captcha?t=${timestamp}`;
            logInfo(`尝试使用完整URL获取验证码: ${url}`);
            
            fetch(url, {
                method: 'GET',
                credentials: 'include',
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => {
                    logInfo(`响应状态: ${response.status} ${response.statusText}`);
                    
                    // 显示响应头信息
                    logInfo('\n响应头信息:');
                    response.headers.forEach((value, name) => {
                        logInfo(`${name}: ${value}`);
                    });
                    
                    if (!response.ok) {
                        throw new Error(`HTTP错误! 状态码: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    logSuccess('获取验证码成功');
                    logInfo('\n返回数据:');
                    logInfo(JSON.stringify(data, null, 2));
                    
                    if (data && data.captchaImage && data.captchaToken) {
                        captchaImage.src = data.captchaImage;
                        captchaImage.style.display = 'block';
                        captchaToken.textContent = `验证码Token: ${data.captchaToken}`;
                        logSuccess('验证码图片显示成功');
                    } else {
                        logError('错误: 验证码数据格式不正确');
                    }
                })
                .catch(error => {
                    logError(`获取验证码失败: ${error.message}`);
                    logError(`错误类型: ${error.constructor.name}`);
                    
                    // 显示网络请求错误的详细信息
                    if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
                        logError('这可能是由于跨域问题或服务器未启动导致的');
                        logError('请确认后端服务正在运行，并且CORS配置正确');
                        logError('检查点1: 确认后端服务是否已启动');
                        logError('检查点2: 确认CORS配置是否允许来自前端的请求');
                        logError('检查点3: 确认API路径是否正确');
                    }
                });
        }
        
        // 使用相对路径获取验证码
        function fetchCaptchaWithRelativeUrl() {
            clearDebugInfo();
            const timestamp = new Date().getTime();
            const url = `/api/auth/captcha?t=${timestamp}`;
            logInfo(`尝试使用相对路径获取验证码: ${url}`);
            
            fetch(url)
                .then(response => {
                    logInfo(`响应状态: ${response.status} ${response.statusText}`);
                    
                    if (!response.ok) {
                        throw new Error(`HTTP错误! 状态码: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    logSuccess('使用相对路径获取验证码成功');
                    logInfo('\n返回数据:');
                    logInfo(JSON.stringify(data, null, 2));
                    captchaImage.src = data.captchaImage;
                    captchaImage.style.display = 'block';
                    captchaToken.textContent = `验证码Token: ${data.captchaToken}`;
                })
                .catch(error => {
                    logError(`使用相对路径获取验证码失败: ${error.message}`);
                    logError('使用相对路径时，需要确保前端服务器配置了正确的代理');
                });
        }
        
        // 事件监听器
        testFullUrlBtn.addEventListener('click', fetchCaptchaWithFullUrl);
        testRelativeBtn.addEventListener('click', fetchCaptchaWithRelativeUrl);
    </script>
</body>
</html>